<template>
	<!-- 三进统计信息主页 -->
	
	<view>
		<trienter-overview :ft="filter_time" @time_filter_change="filterChangeHandler" v-bind:data="overviewData"></trienter-overview>
		
		<view class="empty" v-if="noPermission">暂无权限</view>
		<view class="root-wrapper" v-else>
			<!-- <trienter-card 
				v-for="(value, name, index) in l" 
				:key="index"
				v-bind:info="value"
				v-bind:name="name">
			</trienter-card> -->
			
			<trienter-card
				v-for="(item, index) in arr" 
				:key="index"
				v-bind:info="item">
			</trienter-card>
			
		</view>
		
		
	</view>
</template>

<script>
	import trienterCard from '../../components/trienter-card.vue'
	import trienterOverview from '../../components/trienter-overview.vue'
	
	export default {
		components: {
			trienterCard,
			trienterOverview
		},
		computed: {
			// 相应overview变化
			overviewData: function() {
				let total = this.data.length
				let finished = 0
				this.data.forEach(ele => {
					if (ele.enterList.length !== 0) {
						finished++
					}
				})
				// console.log('total', total, finished)
				return {
					unfinished: total - finished,
					finished: finished
				}
			}
		},
		onLoad(params) {			
			// 如果用户指定了日期（由重定向的参数传入） 则设置filter_time
			if (params.filter_time) {
				this.filter_time = params.filter_time
			}
			
			// 为所有l中加入一个filter_time 在组件配置路径
			let _this = this
			// this.l.map(function(item) {
			// 	_this.$set(item, 'filter_time', _this.filter_time);
			// })
			
			
			this.setDataByDate(this.filter_time)
		},
		methods: {
			filterChangeHandler(param) {
				console.log('收到了子组件的事件', param)
				this.filter_time = param
				this.setDataByDate(this.filter_time)
			},
			
			setDataByDate(date) {
				// 修改l的值以改变视图
				// date为空则不做限制
				this.$u.api.getSubordinaryTrienterHistory({
					date: date
				}).then(res => {
					console.log(res)
					if (res.code === 1) {
						this.noPermission = true
						return
					}
					
					
					this.data = res.data // 便于overview获取数据
					let deptObj = { }
					res.data.forEach(ele => {
						if (Object.keys(deptObj).indexOf(ele.deptName) === -1) {
							deptObj[ele.deptName] = [ele]
						} else {
							deptObj[ele.deptName].push(ele)
						}
					})
					
					let list = []
					Object.keys(deptObj).forEach(key => {
						let obj = deptObj[key]
						obj['name'] = key
						list.push(obj)
					})
					
					console.log('数组化', list)
					list.sort((a,b) => {
						/**
						 * 自定义排序：将打卡率高的学院有限显示
						 * 这里重复计算了trienter-card中的一些computed值
						 * 但是为了保证一致性 和可读性 这里的性能牺牲是值得的
						 */
						let a_finished = a.filter(ele => {
							return ele.enterList.length !== 0
						}).length
									
						let a_unfinished = a.filter(ele => {
							return ele.enterList.length === 0
						}).length
									
						let b_finished = b.filter(ele => {
							return ele.enterList.length !== 0
						}).length
						
						let b_unfinished = b.filter(ele => {
							return ele.enterList.length === 0
						}).length
							
						return b_finished / (b_finished + b_unfinished) -
							   a_finished / (a_finished + a_unfinished)
					})
					
					
					this.arr = list
					
					  
					
					// console.log('deptObj', deptObj)
					// this.l = deptObj
				})
			}
		},
		data() {
			// TODO 根据服务器传回的数据渲染
			return {
				// filter_time默认为今天
				filter_time: this.$time_formatter.get_today(),	
				l: {},
				arr: [], //exp
				data: [],
				noPermission: false
				// l: [
				// 	{
				// 		name: '计算机与通信工程学院',
				// 		normal: 1000,
				// 		unfinished:10,
						
				// 	},
				// 	{
				// 		name: '设计艺术学院',
				// 		normal: 9000,
				// 		unfinished:20
				// 	},
				// 	{
				// 		name: '电气工程学院',
				// 		normal: 100,
				// 		unfinished:20
				// 	}
					
					
				// ]
			}
		}
	}
	
</script>

<style>
</style>
